<template>
  <div class="material-page">
    <a-form class="material-page-search" layout="inline" noStyle>
      <a-form-item label="物料名称">
        <a-input style="width: 160px" placeholder="请输入物料名称关键字" />
      </a-form-item>
      <a-row style="margin-top: 20px; width: 100%">
        <a-col :span="24" style="padding-left: 70px">
          <a-button type="primary">查询</a-button>
          <a-button style="margin-left: 15px">重置</a-button>
        </a-col>
      </a-row>
    </a-form>
    <div class="add-btn">
      <a-button type="primary" @click="onMutplieDownload">
        <template #icon><PlusCircleOutlined /></template>
        批量下载</a-button
      >
    </div>
    <a-table :columns="columns" :data-source="tableData">
      <template #actions="{ record }">
        <a-button type="link" primary>预览</a-button>
        <img
          src="~@/assets/images/download-icon.png"
          alt=""
          @click="onDownload(record)"
          style="
            width: 16px;
            height: 16px;
            vertical-align: -3px;
            cursor: pointer;
          "
        />
      </template>
    </a-table>
  </div>
</template>
<script lang="ts" setup>
import { PlusCircleOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
const columns = [
  {
    title: '物料名称',
    key: 'firstName',
    dataIndex: 'firstName',
  },
  {
    // 需排序
    title: '大小',
  },
  {
    // 需排序
    title: '更新时间',
  },
  {
    title: '操作',
    slots: {
      customRender: 'actions',
    },
  },
];

const tableData = ref([
  {
    key: '1',
    firstName: 'John',
    lastName: 'Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
]);

function onDownload(item: any) {
  //
}

function onMutplieDownload() {
  //
}
</script>

<style lang="scss" scoped>
.material-page {
  .material-page-search {
    box-sizing: border-box;
    padding: 20px 0 20px 16px;
    background: #fafafa;
    margin-bottom: 25px;
  }

  .add-btn {
    text-align: right;
    margin-bottom: 20px;
  }
}
</style>
